<template>
  <div>
    <el-descriptions class="margin-top" title="三方配置管理" :column="2" :size="size" border>
      <template slot="extra">
        <el-button type="primary" size="small" icon="el-icon-edit" @click="editRow">编辑</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-discount" style="font-size: 15px"></i>
          仓位
        </template>
        {{this.tableItem.freightSpace}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-loading" style="font-size: 15px"></i>
          空
        </template>
        {{ this.tableItem.empty }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-more" style="font-size: 15px"></i>
          多
        </template>
        {{ this.tableItem.more }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-money" style="font-size: 15px"></i>
          交易金额
        </template>
        {{ this.tableItem.dealMoney }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-thumb" style="font-size: 15px"></i>
          止盈触发价格
        </template>
        {{ this.tableItem.stopProfit }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-warning-outline" style="font-size: 15px"></i>
          止损触发价格
        </template>
        {{ this.tableItem.stopLoss }}
      </el-descriptions-item>
    </el-descriptions>


    <!--弹框组件开始-----------------------start-->
    <dialog-component
      v-if="showDialog"
      ref="dialogComponent"
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import dialogComponent from "./dialogComponent";

export default {
  name: "index",
  components: {dialogComponent},
  data() {
    return {
      size: "10",
      tableLoading: false,
      showDialog: false,
      dialogTitle: "编辑欧易配置",
      tableItem: {
        freightSpace: "0.1USDT",
        empty: "0.1USDT",
        more: "0.1USDT",
        dealMoney: "20USDT",
        stopProfit: "10USDT",
        stopLoss: "10USDT",
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    //获取表格数据
    fetchData(){
      const that = this;
      that.tableLoading = true;
      // that.tableItem = [
      //   {
      //     freightSpace: "0.1USDT",
      //     empty: "0.1USDT",
      //     more: "0.1USDT",
      //     dealMoney: "20USDT",
      //     stopProfit: "10USDT",
      //     stopLoss: "10USDT",
      //   },
      // ];
      setTimeout(() => {
        that.tableLoading = false;
      }, 1500);
    },


    //编辑操作
    editRow() {
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs["dialogComponent"].showDialog = true;
      });
      console.log("修改弹框")
    },
    // 保存操作
    submitForm(formName) {
      const that = this;
      const params = Object.assign(that.formInfo, {});
      that.$refs[formName].validate((valid) => {
        if (valid) {
          // 走保存请求
          that.$message({
            message: "操作成功！",
            type: "success",
          });
          that.closeDialog(1);
        } else {
          return false;
        }
      });
    },
    // 关闭操作
    closeDialog(flag) {
      if (flag) {
        // 重新刷新表格内容
        this.fetchData();
      }
      this.showDialog = false;
    },
  }
}
</script>

<style>

</style>
